<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-07 09:52:53
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-08 14:33:39
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        ul {
            width: 1200px;
            display: flex;
            flex-wrap: wrap;
            margin: 0 auto;
            justify-content: space-between;
            padding-top: 10px;
        }

        li {
            width: 290px;
            border: 1px solid #abcdef;
            margin-bottom: 10px;
            padding: 5px;
            box-sizing: border-box;
        }

        li>img {
            width: 278px;
            display: block;
        }

        .pagination {
            margin: 10px auto;
            width: 1200px;
            height: 50px;
            display: flex;
            align-items: center;

        }

        .pagination>.prev,
        .pagination>.next {
            width: 50px;
            height: 30px;
            cursor: pointer;
            background-color: orange;
            font-size: 30px;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;

        }


        .total {
            font-size: 30px;
            font-weight: 700;
            margin: 0 20px;
        }

        select {
            font-size: 25px;
            padding-left: 20px;
            margin-left: 30px;
        }

        .pagination>.disable {
            cursor: not-allowed;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <!-- innerHTML 浏览器解析子标签  innerText  浏览器不解析子标签 原样显示
        value -->
    <div class="pagination">
        <span class="prev">&lt;</span>
        <span class="total"> 98 / 100</span>
        <span class="next">&gt;</span>
        <select name="" id="">
            <option value="4">4</option>
            <option value="8">8</option>
            <option value="12">12</option>
            <option value="16">16</option>
            <option value="20">20</option>
        </select>
    </div>
    <ul>

    </ul>

    <script src="./dm_list.js"></script>
    <script>
        // 准备一个空字符串 
        // 让每个对象的数据 提取出来以后拼接到后边  
        // 拼接好的字符串放到 ul中 
        // var strs = '';

        // lists.forEach(function(item){  // item是一个对象
        //     strs+= `
        //         <li> 
        //             <img src="${item.pic}" alt="">
        //             <p>${item.name}</p>
        //             <p>城市:${item.city}</p>                    
        //             <p>地址:${item.address}</p> 
        //             <p>价格:${item.price}</p>                    
        //             <p>时间:${item.showTime}</p>                    
        //         </li>  
        //     `
        // });

        // var uls = document.querySelector("ul");
        // uls.innerHTML = strs;



        //   总页数

        //   用户决定看第几页  

        //   第一页  没有上一页了  

        //   最后一页  没有下一页了  

        //   每页显示多少条    程序员自己决定  

        //  已知  用户想看第几页  每页显示多少条   程序员自己决定  

        // 每页  4 
        //  1     0  ~  3     4
        //  2     4  ~  7     4
        //  3     8  ~ 11     4
        //  4     12 ~ 15     4 
        //  5     16 ~ 19     4 

        // current  (current-1)*pagesize ~ current*pagesize-1


        // < 1 / 总页数  >
        // 当点击下一页   < 2 / 总页数  >  数字 ++ 
        // 当点击上一页   < 1 / 总页数  >  数字 --
        // 现在如果是1 /总页数    点击上一页 点不动  
        // 现在如果是10/总页数    点击下一页 点不动    

        // 1
        // 打开页面  从数组中截取数据  渲染到页面上  slice   
        //  当前第几页  页面总数  渲染到页面的    当前第几页 / 总共第几页 


        // 2 调整上一页按钮的类名  
        //  如果第一页 类名 是 prev  和  disable 
        // 如果不是第一页 只有 prev 

        // 3 调整下一页按钮的类名  
        //  如果最后一页 类名 是 next  和  disable 
        // 如果不是最后一页 只有 next 

        // 4 下拉框  
        // 用户选择哪一个  每页展示多少条 



        // 当用户点击上一页的时候 
        // 当前页码 -- 
        // 根据页码 渲染数据  
        // 总页数 和当前页数  需要 改 
        // 调整上一页按钮的类名  
        //  如果第一页 类名 是 prev  和  disable 
        // 如果不是第一页 只有 prev 

        //  调整下一页按钮的类名  
        //  如果最后一页 类名 是 next  和  disable 
        // 如果不是最后一页 只有 next 

        // 下拉框  
        // 用户选择哪一个  每页展示多少条 


        // 当用户点击下一页的时候 
        // 总页数 和当前页数  需要 改 
        // 当前页码 ++ 
        // 根据页码 渲染数据  

        // 调整上一页按钮的类名  

        //  如果第一页 类名 是 prev  和  disable 
        // 如果不是第一页 只有 prev 

        //  调整下一页按钮的类名  
        //  如果最后一页 类名 是 next  和  disable 
        // 如果不是最后一页 只有 next 

        // 下拉框  
        // 用户选择哪一个  每页展示多少条 


        // 用户点击下拉菜单的时候  

        // 修改每页显示多少条  
        // 渲染数据 
        // 总页数 和当前页数  需要 改 

        // 调整上一页按钮的类名  
        //  如果第一页 类名 是 prev  和  disable 
        // 如果不是第一页 只有 prev 

        //  调整下一页按钮的类名  
        //  如果最后一页 类名 是 next  和  disable 
        // 如果不是最后一页 只有 next 


        // 获取元素  

        // ul  //我们需要吧数据渲染到ul中  
        var contentBox = document.querySelector('ul');
        //prev 
        var prevBtn = document.querySelector('.prev');
        // next 
        var nextBtn = document.querySelector('.next');
        // select 
        var selectEle = document.querySelector('select');

        // 统计结果 
        var totalBox = document.querySelector('.total');


        // 准备变量 


        var pagesize = 16; // 每页显示4条  
        // pagesize  = selectEle.value
        var current = 7; // 当前页 默认为1 

        var total = 0; // 我们不知道数据总共多少条 

        //(current-1)*pagesize ~ current*pagesize-1 
        // 我们要取到 current*pagesize-1 
        // bindList [{},{},{},{}]
        function bindHtml() {
            var bindList = lists.slice((current - 1) * pagesize, current * pagesize) // [)
            contentBox.innerHTML = bindList.reduce(function (prev, item) {
                return prev + `
                <li> 
                    <img src="${item.pic}" alt="">
                    <p>${item.name}</p>
                    <p>城市:${item.city}</p>                    
                    <p>地址:${item.address}</p> 
                    <p>价格:${item.price}</p>                    
                    <p>时间:${item.showTime}</p>                    
                </li>  
            `
            }, '');

            total = Math.ceil(lists.length / pagesize); // (121 / 4) => 31
            totalBox.innerText = `${current} / ${total}`;

            prevBtn.className = current === 1 ? "prev disable" : 'prev';
            nextBtn.className = current === total ? "next disable" : 'next';
            selectEle.value = pagesize
        }

        // 打开页面开始渲染  

        bindHtml();

        // 点击下一页  

        nextBtn.onclick = function () {

            if (current === total) return // 当当前页=最后一页 那么不能往下点了
            current++;
            bindHtml();
        }

        // 上一页 
        prevBtn.onclick = function () {

            if (current === 1) return // 当前页=第一页 那么不能往前点了
            current--;
            bindHtml();
        }

        selectEle.onchange = function () {
            // alert(typeof selectEle.value);string
            pagesize = selectEle.value - 0; //转成数值 

            // 下拉菜单不管用户到第几页了 
            //只要选了 都是从头开始展示 
            current = 1

            bindHtml();

        }
    </script>
</body>

</html>